移动屏幕适配

2015-10-16更新。

简介

移动屏幕适配是一个比较令人头疼的问题，这是我写的一个通过动态设置viewport的移动屏幕适配的工具函数，包括定宽和rem两种适配方法，目前在我自己的项目中用起来还不错，后续也会优化调整，github地址这里。

说明

页面事先添加meta标签 <meta name="viewport" content="width=device-width, initial-scale=1" />，然后调用方法如fixViewport('fixed', 640)即可。

参数

• type
  适配类型(可选值为'fixed'或'rem')

• width
  设计稿宽度(整数)

适配方法

可以选择以下两种方式进行屏幕适配：

• 定宽：
  原理：设定viewport的宽度为固定值(即传递的width值)，并根据屏幕宽度和width值计算viewport缩放比例。
  实际开发在css中任何长度尺寸均使用px单位，大小设置为设计稿中原始尺寸值；
  字体单位使用em, body下直接子元素字体大小设置为设计稿中尺寸值 / 100；
  非直接子元素若其父元素未设置字体大小则与直接子元素相同，否则根据父元素字体大小计算其相对值。

• rem:
  原理：根据设备dpr和屏幕宽度来计算viewport宽度，并根据设备dpr计算viewport缩放比例，然后在html标签中设置font-size的属性值。
  实际开发在css中任何长度尺寸均使用rem单位，大小设置为设计稿中尺寸值 / 100;
  字体单位使用em, body下直接子元素字体大小设置为设计稿中尺寸值 / 100；
  非直接子元素若其父元素未设置字体大小则与直接子元素相同，否则根据父元素字体大小计算其相对值。
  若需要1px物理像素的边框效果，则border的宽度不需要使用rem，设定为1px即可。

代码

/**
 * Created by GG on 15/7/29.
 *
 *  页面事先添加meta标签 <meta name="viewport" content="width=device-width, initial-scale=1" />
 *  参数：type(适配类型, 可选值为'fixed'或'rem')；width(设计稿宽度，整数)
 *  可以选择以下两种情况适配：
 *  1. 定宽：原理是设定viewport的宽度为固定值(即传递的width值)，并根据屏幕宽度和width值计算viewport缩放比例。
 *     实际开发在css中任何长度尺寸均使用px单位，大小设置为设计稿中原始尺寸值；
 *     字体单位使用em, body下直接子元素字体大小设置为设计稿中尺寸值 / 100；
 *     非直接子元素若其父元素未设置字体大小则与直接子元素相同，否则根据父元素字体大小计算其相对值。
 *  2. REM：原理是根据设备dpr和屏幕宽度来计算viewport宽度，并根据设备dpr计算viewport缩放比例，然后在html标签中设置font-size的属性值。
 *     实际开发在css中任何长度尺寸均使用rem单位，大小设置为设计稿中尺寸值 / 100;
 *     字体单位使用em, body下直接子元素字体大小设置为设计稿中尺寸值 / 100；
 *     非直接子元素若其父元素未设置字体大小则与直接子元素相同，否则根据父元素字体大小计算其相对值。
 *     若需要1px物理像素的边框效果，则border的宽度不需要使用rem，设定为1px即可。
 */

(function () {
    function fixViewport(type, designWidth) {
        var metaEl = document.querySelector('meta[name="viewport"]');
        //由于初始设置了viewport的width=device-width,所以此处docEl.clientWidth即是屏幕的设备宽度
        var clientWidth = document.documentElement.clientWidth;
        var width, scale;

        switch (type) {
            case 'fixed':
                width = designWidth;
                scale = clientWidth / designWidth;
                break;
            case 'rem':
                var dpr = window.devicePixelRatio || 1;
                width = clientWidth * dpr;
                scale = 1 / dpr;
                document.documentElement.style.fontSize = 100 * (clientWidth * dpr / designWidth) + "px";
                break;
        }
        metaEl.setAttribute('content', 'width=' + width + ',initial-scale=' + scale + ',maximum-scale=' + scale +
            ',minimum-scale=' + scale);

        //设置body的基准字体大小
        document.body.style.fontSize = 50 / scale + 'px';
    }

    fixViewport('rem', 640);
}());